<template>
	<view class="container">
		<view class="cell flex-ac">
			<view class="hd">反馈类型</view>
			<view class="bd flexmid">
				<u-radio-group v-model="value" @change="radioGroupChange">
					<u-radio label-size='26' icon-size='26' v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="cell flex-ac flex-b" v-if="params.type == 2" @click="$Jump.Open('/pages/user/repair/selCar?type=2')">
			<view class="hd">车牌号</view>
			<view class="bd flex-ac">
				<input type="text" placeholder="请选择" v-model="carNo" disabled/>
				<u-icon name="arrow-right" size="24" color="#666"></u-icon>
			</view>
		</view>
		<view class="cell flex-ac flex-b" v-if="params.type == 3" @click="$Jump.Open('./selOrder')">
			<view class="hd">订单号</view>
			<view class="bd flex-ac">
				<input type="text" v-model="orderSn" placeholder="请选择" disabled/>
				<u-icon name="arrow-right" size="24" color="#666"></u-icon>
			</view>
		</view>
		<view class="cell flex-ac flex-b" v-if="params.type == 3">
			<view class="hd">车次额定油耗</view>
			<view class="bd flex-ac">
				<input type="digit" v-model="params.carOilConsum" placeholder="请输入"/>
				<!-- <u-icon name="arrow-right" size="24" color="#666"></u-icon> -->
			</view>
		</view>
		<view class="box flex-ac">
			<view class="hd">异常反馈</view>
			<view class="bd">
				<textarea v-model="params.content" placeholder="请输入" />
			</view>
		</view>
		<view class="foot">
			<view class="btnBox flex-ac">
				<view class="btn-1 middle" @click="submit">确定</view>
			</view>
			<x-botSpace></x-botSpace>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				text: '',
				value: '普通反馈',
				carNo: '',
				list: [{
						name: '普通反馈',
						disabled: false
					},
					{
						name: '修改车辆',
						disabled: false
					},
					{
						name: '修改订单',
						disabled: false
					}
				],
				params:{
					carId: '', // 车辆id
					carOilConsum: '', //车次额定油耗
					content: '', // 异常内容
					id: '', // 运单id
					orderId: '', // 订单id
					type: 1  // 异常类型 1-普通 2-修改车辆 3-修改订单
				},
				orderSn: ''
			}
		},
		onLoad(opt) {
			if (opt) console.log('opt:', opt)
			this.params.id = opt.id
		},
		methods: {
			radioGroupChange(e){
				if(e === '普通反馈'){
					this.params.type = 1
				}else if(e=='修改车辆'){
					this.params.type = 2
				}else {
					this.params.type = 3
				}
			},
			submit() {
				if (this.params.content === '') return uni.showToast({
					title: '请输入异常内容',
					icon: 'none'
				})
				if (this.value === '') return uni.showToast({
					title: '请选择反馈类型',
					icon: 'none'
				})
				if(this.params.type == 2 && this.params.carId === '')  return this.$Toast.message('请选择车辆')
				if(this.params.type == 3 && this.params.orderId === '')  return this.$Toast.message('请选择订单')
				this.$Net.post('/orderTransport/abnormal', this.params).then(res => {
					this.$Toast.messageIcon('反馈成功')
					setTimeout(() => {
						this.$Jump.Back(1)
					}, 1000)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	// @import './style.scss';
	.container {
		width: 100%;
	}
	.cell{
		width: 100%;
		height: 120rpx;
		padding: 0 30rpx;
		// border-top: 1rpx solid #dedede;
		border-bottom: 1rpx solid #dedede;
		.hd{
			flex-shrink: 0;
			margin-right: 14rpx;
			font-size: 30rpx;
		}
		.bd{
			flex: 1;
			font-size: 30rpx;
			text-align: center;
			input{
				flex: 1;
				padding-right: 18rpx;
				text-align: right;
				font-size: 30rpx;
			}
		}
	}
	.cell:first-child{
		border-top: 1rpx solid #dedede;
	}
	.box {
		// width: 100%;
		padding: 30rpx;
		align-items: flex-start;
		box-sizing: border-box;

		.hd {
			flex-shrink: 0;
			margin-right: 14rpx;
		}

		.bd {
			flex: 1;
			height: 400rpx;
			border: 1rpx solid #bbbbbb;
			padding: 20rpx;
			font-size: 28rpx;
			color: #333333;
			border-radius: 8rpx;
			textarea {
				width: 100%;
			}
		}
	}

	.foot {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 30rpx;

		.btnBox {
			width: 100%;

			.btn-1 {
				flex: 1;
				height: 90rpx;
				background: #1684FC;
				border-radius: 10rpx;
				color: #ffffff;
				font-size: 34rpx;
			}

			.btn-2 {
				flex: 1;
				height: 90rpx;
				border: 1px solid #1684FC;
				border-radius: 10rpx;
				color: #1684FC;
				font-size: 34rpx;
			}
		}
	}
</style>